<!DOCTYPE html>

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Ariel Penciaroli Web</title>
    <meta name="description" content="Sitio de Presentacion de Ariel Penciaroli"/>
    <meta name="keywords" content="ariel, penciaroli"/>
    
    <!--[if lt IE 9]-->
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <!--[endif]-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link href="bootstrap/css/bootstrap-lightbox.min.css" rel="stylesheet"/>
    <link href="./css/estilo.css" rel="stylesheet"/>
  </head>
  
  <body>
	
    <div class="generico" >
	    <img class="img-teclado" src="./images/slide-2.jpg" alt="tecladoimg"/>
	    
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Ariel Penciaroli</a>
                    <ul class="nav">
                        <li><a href="#about">Sobre mí</a></li>
                        <li><a href="#conocimientos">Conocimientos</a></li>
	                    <li><a href="#proyectos">Portfolio</a></li>
                        <li><a href="#contact">Contacto</a></li>
                    </ul>
                </div>
            </div>
        </div>
	
        <div class="hero-unit" id="about">
            <h3>Sobre mi:</h3>
      
              Mi nombre es Ariel Penciaroli, soy un programador y desarrollador web que vive en Rosario, Argentina.
            <div style="clear:both;"></div>
            Cursando la carrera Analista Universitario en Sistemas y en constante aprendizaje.
            <div style="clear:both;"></div>
      
	        <a href="http://www.linkedin.com/in/arielpenciaroli"><img src="./images/linkedin.png" alt="linkedin" /></a>
	    	<a class="btn btn-info btn-large" href="./cv/Ariel%20Penciaroli.pdf"><i class="icon-arrow-down"></i>Descargar CV</a>

	
        </div>
    
        <!-- Separador -->
    
        <div class="hero-unit" id="conocimientos">

            <div class="tabbable"> 
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Herramientas</a></li>
                    <li ><a href="#tab2" data-toggle="tab">Frameworks</a></li>
                    <li ><a href="#tab3" data-toggle="tab">Programación</a></li>
                    <li ><a href="#tab4" data-toggle="tab">Base de Datos</a></li>
                </ul>
            <div class="tab-content">

            <div class="tab-pane active" id="tab1">
                <ul class="menu-herramientas">
                    <li>HTML</li>
                    <li>HTML 5</li>
                    <li>XHTML</li>
                    <li>CSS</li>
                    <li>CSS 3</li>
                    <li>JavaScript</li>
                </ul>
            </div>
    
	
            <div class="tab-pane" id="tab2">
                <ul class="menu-framworks">
                    <li><a href="http://jquery.com/"><img class="logo1" src="./images/jquery.jpg" alt="jquery" /></a></li>
                    <li><a href="http://jqueryui.com/"><img class="logo2" src="./images/jqueryui.jpg" alt="jquery" /></a></li>
                </ul>
            </div>
	
	        <div class="tab-pane" id="tab3">
                <ul class="menu-prog">
                    <li>Java</li>
                    <li>C</li>
                    <li>Python</li>
                    <li>PHP</li>
                </ul>
            </div>
    
            <div class="tab-pane" id="tab4">
                <ul class="menu-BA">
                    <li>MySQL</li>
                </ul>
            </div>
            </div>
		 
            </div>

         </div>
    
    <!---Separador-->
    
        <div class="hero-unit" id="proyectos">
            <h2>Portfolio</h2>
          
            <div class="row-fluid">
                <ul class="thumbnails">
                    <li class="span4">
                        <a href="http://seatool.org" class="thumbnail">
                        <img src="./images/sea.jpg" alt="">
                        </a>
                    </li>
                    <li class="span4">
				        <a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
					        <img src="./images/proyecto1.jpg" alt="Click to view the lightbox">
				        </a>
			        </li>
		        </ul>
		    <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
			    <div class='lightbox-content'>
				    <img src="./images/proyecto1.jpg" alt="">
				<!--div class="lightbox-caption"><p>Your caption here</p></div-->
			    </div>
		    </div>
            	   
          </div> 
        </div>
    
    
    <!--Separador-->
    
    <div class="hero-unit" id="contact">  
        <h2>CONTACTO</h2> 	
        <form class="form" action="contacto.php" method="post" >
            <label for="name" accesskey="n" tabindex="1">Nombre</label>
            <input type="text" id="name" name="name" value="" />
            <label for="email" accesskey="e" tabindex="2">E-Mail</label>
            <input type="text" id="email" name="email" value=""/>
            <label for="website" accesskey="w" tabindex="3">Sitio Web</label>
            <input type="text" id="website" name="website" value=""/>
            <label for="mensaje" accesskey="m" tabindex="4">Mensaje</label>
            <textarea name="mensaje" id="mensaje" rows="10" cols="10"></textarea>
            <div style="clear:both"></div>
            <button type="submit" class="btn">Enviar</button>
        </form>
        <img class="contacto-imagen" src="./images/contactar.jpg" alt="imagen-contacto"/> 
    </div> 
    
 </div>
    
    
    <!--Separador-->
     
     
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap-lightbox.min.js" type="text/javascript"></script>
    <script src="./js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $("div.container ul.nav li a").bind("click", function(e){
         e.preventDefault(); e.stopPropagation();
         $("ul.nav li").removeClass("active");
         $(this).parent().addClass("active");
         $.scrollTo($(this).attr('href'), 800, {easing:'elasout'} );
        });
		
        });
    </script> 
  </body>
</html>
